<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-form ref="form" :model="userVO" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select
                v-model="userVO.departmentId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    ><el-tag type="danger" size="mini">{{
                      item.deptCount
                    }}</el-tag></span
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="userVO.username" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input v-model="userVO.email" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-radio-group v-model="userVO.sex">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
                <el-radio :label="''">全部</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input v-model="userVO.nickname" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button type="primary" icon="el-icon-refresh" @click="reset"
              >重置</el-button
            >
            <el-button type="success" icon="el-icon-search" @click="search"
              >查询</el-button
            >
            <el-button type="info" icon="el-icon-plus" @click="addUser"
              >添加</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-download"
              @click="exportExcel"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <!--表格内容显示区域-->
      <el-table :data="userList" border max-height="400" style="width: 100%">
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="110">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <!-- 如何获取循环的对象 useList  双重三元表达式 -->
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          sortable
          label="所属部门"
          width="180"
        >
        </el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">
        </el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <!-- scope表示当前表中的一行数据 -->
          <template slot-scope="scope">
            <!-- scope.row表示这一行的对象 -->
            <el-switch
              v-model="scope.row.status"
              active-color="#ff4949"
              inactive-color="#cccccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-s-tools"
          ></el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[4, 5, 6, 7]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <UserAdd
        :addOrUpdateVisible="addOrUpdateVisible"
        :departmentList="departmentList"
        @changeShow="showAddOrUpdate"
      ></UserAdd>
    </el-card>
  </div>
</template>

<script>
import { findUserList, exportUserInfo } from "../../api/user";
import { findDeptNameAndCount } from "../../api/department";
import UserAdd from "./UserAdd.vue";
export default {
  data() {
    return {
      userVO: {
        departmentId: "",
        username: "",
        email: "",
        sex: "",
        nickname: "",
      },
      //部门集合
      departmentList: [],
      userList: [],
      //当前页码
      current: 1,
      //每页条数
      size: 5,
      //总条数
      total: 10,
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
    };
  },
  components: {
    UserAdd,
  },
  methods: {
    //重置
    reset() {
      this.userVO = {};
    },
    //查询
    search() {
      this.current = 1;
      this.getUserList();
    },
    //导出
    exportExcel() {
      exportUserInfo(this.userVO)
        .then((res) => {
          //这里没有返回数据,但是要在响应头中进行下载操作
          // 将二进制文件转化为可访问的url
          let url = window.URL.createObjectURL(new Blob([res]));
          //创建了一个a标签的超链接
          var a = document.createElement("a");
          //将a标签添加到body内容中
          document.body.appendChild(a);
          a.href = url;
          a.download = "用户列表.xls";
          //自动点击事件
          a.click();
          //解析url进行下载
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加
    addUser() {
      this.addOrUpdateVisible = true;
    },
    handleSizeChange(val) {
      this.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getUserList();
    },
    async getDeptNameAndCount() {
      let result = await findDeptNameAndCount();
      this.departmentList = result.data.departmentList;
    },

    async getUserList() {
      let result = await findUserList(this.current, this.size, this.userVO);
      this.userList = result.data.userPage.records;
      this.total = result.data.userPage.total;
    },

    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === "false") {
        this.addOrUpdateVisible = false;
      } else {
        this.addOrUpdateVisible = true;
      }
    },
  },
  created() {
    //获取部门的人数以及名称
    this.getDeptNameAndCount();
    //获取用户的信息
    this.getUserList();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-input,
.el-select {
  width: 210px;
}

.el-pagination {
  margin-top: 10px;
}
</style>